Добавляет статью про Container Queries by kazakov-al · Pull Request #5543 · doka-guide/content

kazakov-al · 2024-11-03T17:49:50Z

Описание

Добавляет статью про выражения от контейнера

Превью: https://content-5543.dev.doka.guide/css/container-queries/

kazakov-al · 2024-11-03T18:05:01Z

Чет мне кажется я с "блин, короче" даже слегка переборщил :D

solarrust

Привет!
Как же я рада этому пиару и этому материалу. Прости, что затянула с ревью. Пока только предложила изменения в мете. Скоро вернусь и прочитаю подробнее =)
Давай добавим демки?

css/container-queries/index.md

kazakov-al · 2024-11-16T01:56:31Z

Привет! Как же я рада этому пиару и этому материалу. Прости, что затянула с ревью. Пока только предложила изменения в мете. Скоро вернусь и прочитаю подробнее =) Давай добавим демки?

Прив, та все супер, ревьюй в удобном темпе :) Я тоже затянул с пиаром тк в запаре :D

А какие именно демки?
Если у тебя есть идейки, я не против слегка структурку подвигать, аля разделить на смысловые секции или еще чего

Co-authored-by: Alena Batitskaia <[email protected]>

skorobaeus · 2024-12-11T11:21:09Z

А какие именно демки?

Привет! Я думаю, было бы хорошо добавить две демки, которые ответили бы на такие вопросы:

В каких случаях container queries удобнее медиазапросов?
Бывают ли случаи, когда медиазапросы и вовсе особо неприменимы, зато здорово помогут выражения от контейнера?

В первом случае мне приходит на ум вёрстка страницы с закрывающейся боковой панелью, где в основной секции контент должен перестраиваться. При вёрстке на медиазапросах придётся заморачиваться и вычитать из ширины страницы ширину боковой колонки, чтобы прикинуть, сколько места у нас есть, бла-бла-бла, а выражения от контейнера сразу нам сообщают, сколько у нас места. Код короче и проще, PROFIT.

Во втором случае можно сверстать элемент, размеры которого подконтрольны пользователю и никак не зависят от размера окна. Такой пример нашла: https://codepen.io/shadeed/pen/VwPQORy?editors=0100

kazakov-al · 2025-02-03T19:35:43Z

А какие именно демки?

Привет! Я думаю, было бы хорошо добавить две демки, которые ответили бы на такие вопросы:

В каких случаях container queries удобнее медиазапросов?

Бывают ли случаи, когда медиазапросы и вовсе особо неприменимы, зато здорово помогут выражения от контейнера?

В первом случае мне приходит на ум вёрстка страницы с закрывающейся боковой панелью, где в основной секции контент должен перестраиваться. При вёрстке на медиазапросах придётся заморачиваться и вычитать из ширины страницы ширину боковой колонки, чтобы прикинуть, сколько места у нас есть, бла-бла-бла, а выражения от контейнера сразу нам сообщают, сколько у нас места. Код короче и проще, PROFIT.

Во втором случае можно сверстать элемент, размеры которого подконтрольны пользователю и никак не зависят от размера окна. Такой пример нашла: https://codepen.io/shadeed/pen/VwPQORy?editors=0100

Прив, на первый взгляд вопросы выглядят как синонимы, давай одной демкой попробуем покрыть.

Первый вариант мне кажется противоречивым, тк будет прыгать контент, юзеры подобное не любят, не хотелось бы антипаттерн в качестве примера приводить. Но сама идея класс, надо подумать как иначе обыграть

Второй вариант, к сожалению, не особо подходит под эти пункты, тк взаимозаменяем медиа (

Тут еще джош вкатил статейку недавно, гляну в конце недели. мб там смогу подбрить идею https://www.joshwcomeau.com/css/container-queries-unleashed/

Co-authored-by: Alena Batitskaia <[email protected]>

skorobaeus · 2025-02-10T12:19:22Z

А какие именно демки?

Привет! Я думаю, было бы хорошо добавить две демки, которые ответили бы на такие вопросы:

В каких случаях container queries удобнее медиазапросов?

Бывают ли случаи, когда медиазапросы и вовсе особо неприменимы, зато здорово помогут выражения от контейнера?

В первом случае мне приходит на ум вёрстка страницы с закрывающейся боковой панелью, где в основной секции контент должен перестраиваться. При вёрстке на медиазапросах придётся заморачиваться и вычитать из ширины страницы ширину боковой колонки, чтобы прикинуть, сколько места у нас есть, бла-бла-бла, а выражения от контейнера сразу нам сообщают, сколько у нас места. Код короче и проще, PROFIT.
Во втором случае можно сверстать элемент, размеры которого подконтрольны пользователю и никак не зависят от размера окна. Такой пример нашла: https://codepen.io/shadeed/pen/VwPQORy?editors=0100

Прив, на первый взгляд вопросы выглядят как синонимы, давай одной демкой попробуем покрыть.

Первый вариант мне кажется противоречивым, тк будет прыгать контент, юзеры подобное не любят, не хотелось бы антипаттерн в качестве примера приводить. Но сама идея класс, надо подумать как иначе обыграть

Второй вариант, к сожалению, не особо подходит под эти пункты, тк взаимозаменяем медиа (

Тут еще джош вкатил статейку недавно, гляну в конце недели. мб там смогу подбрить идею https://www.joshwcomeau.com/css/container-queries-unleashed/

Ап ту ю, моё дело — предложить :)

Inventoris

Привет Лёша! Классно, что решил написать такой полезный материал, его сильно не хватало 👍

Я оставил несколько комментов, посмотри пожалуйста. Ещё у нас нет ни одного заголовка, давай подведём доку к шаблону для начала.

Ещё, конечно, очень хочется демку! Пользователям будет здорово посмотреть на работу запросов к контейнеру в действии (тут твой полёт творчества).

После набегу ещё вычитать текст и посмотреть код 🌟

Inventoris · 2025-02-11T11:49:28Z

css/container-queries/index.md

@@ -0,0 +1,133 @@
+---
+title: "Руководство по выражениям от контейнера"
+description:


Нужно добавить description.

Inventoris · 2025-02-11T11:53:16Z

css/container-queries/index.md

+authors:
+  - kazakov-al
+related:
+  -


Здесь просятся три рекомендации) Я бы как минимум добавил что-нибудь из директив, вроде @media, а дальше на твой авторский взгляд.

(Для себя)

@media
Единицы измерения
Mobile-first vs Desktop-first

Ещё бы докинуть keywords чтобы статья искалась по «container queries» как минимум

css/container-queries/index.md

Inventoris · 2025-02-11T11:56:22Z

css/container-queries/index.md

@@ -0,0 +1,133 @@
+---
+title: "Руководство по выражениям от контейнера"


Как смотришь на то, чтобы переименовать тут из руководства в доку про директиву @container и поместить её в раздел "Директивы"?

Нейтрально :) Тут не только про директиву, тут еще и про: новые единицы измерения и свойства связанны с контейнерами. Крч, не атомарное, а что-то общее.

Крч, как посчитаете нужным - так и впишем. Решать вам)

@solarrust что скажешь?)

Давайте назовём просто «Выражения от контейнера».

solarrust · 2025-02-17T11:57:49Z

@kazakov-al френдли ремайндер по этому пиару =)

Co-authored-by: Alexey Nikitchenko <[email protected]>

solarrust

@kazakov-al хорошая получилась статья, спасибо.
Есть ли у тебя силы ещё над ней поработать? У меня появилась мысль, что хорошо бы написать ультимейт гайд по выражениям от контейнера. Типа такого: https://ishadeed.com/article/css-container-query-guide/

Гайды отлично залетают, читатели их любят. Это видно по гайдам для флексбоксов и гридов.

Я буду очень рада, если ты согласишься взяться за эту не простую, но очень значимую задачу =)

solarrust · 2025-03-11T11:47:50Z

css/container-queries/index.md

+authors:
+  - kazakov-al
+related:
+  -


Ещё бы докинуть keywords чтобы статья искалась по «container queries» как минимум

css/container-queries/index.md

Co-authored-by: Alena Batitskaia <[email protected]>

github-actions · 2025-03-12T01:23:11Z

Превью контента из 26c1ec0 опубликовано.

kazakov-al · 2025-03-15T20:30:56Z

@kazakov-al хорошая получилась статья, спасибо. Есть ли у тебя силы ещё над ней поработать? У меня появилась мысль, что хорошо бы написать ультимейт гайд по выражениям от контейнера. Типа такого: https://ishadeed.com/article/css-container-query-guide/

Гайды отлично залетают, читатели их любят. Это видно по гайдам для флексбоксов и гридов.

Я буду очень рада, если ты согласишься взяться за эту не простую, но очень значимую задачу =)

Прив, пока что в запаре. На сл выхах закину правочки все + гляну что там по статье

solarrust · 2025-04-23T18:58:11Z

@kazakov-al мягкий пинг =)

solarrust · 2025-06-11T05:50:24Z

Работа над статёй, к сожалению, застопорилась. Пока закрою этот пулреквест. @kazakov-al, пожалуйста, когда будешь готов продолжить — открой новый пиар 🙌

feat: add article container queries

fd2547e

kazakov-al requested a review from solarrust as a code owner November 3, 2024 17:49

github-actions bot added css Контент по CSS статья Расширенный материал labels Nov 3, 2024

fix: lint

9b685d9

some change

68a4a15

solarrust assigned kazakov-al Nov 8, 2024

solarrust reviewed Nov 15, 2024

View reviewed changes

css/container-queries/index.md Show resolved Hide resolved

css/container-queries/index.md Outdated Show resolved Hide resolved

TatianaFokina changed the title ~~feat: add article container queries~~ Добавляет статью про Container Queries Nov 15, 2024

Update css/container-queries/index.md

9af9be0

Co-authored-by: Alena Batitskaia <[email protected]>

skorobaeus self-requested a review December 11, 2024 11:21

Update css/container-queries/index.md

9d187f6

Co-authored-by: Alena Batitskaia <[email protected]>

kazakov-al requested a review from Inventoris as a code owner February 3, 2025 19:39

Inventoris requested changes Feb 11, 2025

View reviewed changes

Update css/container-queries/index.md

be21911

Co-authored-by: Alexey Nikitchenko <[email protected]>

github-actions bot added the дока Справочный материал label Feb 20, 2025

solarrust reviewed Mar 11, 2025

View reviewed changes

kazakov-al and others added 4 commits March 12, 2025 04:15

Update css/container-queries/index.md

030dbc2

Co-authored-by: Alena Batitskaia <[email protected]>

Update css/container-queries/index.md

2c7dcf7

Co-authored-by: Alena Batitskaia <[email protected]>

Update css/container-queries/index.md

616a639

Co-authored-by: Alena Batitskaia <[email protected]>

Update css/container-queries/index.md

26c1ec0

Co-authored-by: Alena Batitskaia <[email protected]>

solarrust closed this Jun 11, 2025

		@@ -0,0 +1,133 @@
		---
		title: "Руководство по выражениям от контейнера"

Conversation

kazakov-al commented Nov 3, 2024 • edited by solarrust Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Описание

Uh oh!

kazakov-al commented Nov 3, 2024

Uh oh!

solarrust left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

kazakov-al commented Nov 16, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

skorobaeus commented Dec 11, 2024

Uh oh!

kazakov-al commented Feb 3, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

skorobaeus commented Feb 10, 2025

Uh oh!

Inventoris left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

kazakov-al Feb 20, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

kazakov-al Feb 20, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

solarrust commented Feb 17, 2025

Uh oh!

solarrust left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

github-actions bot commented Mar 12, 2025

Uh oh!

kazakov-al commented Mar 15, 2025

Uh oh!

solarrust commented Apr 23, 2025

Uh oh!

solarrust commented Jun 11, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

kazakov-al commented Nov 3, 2024 •

edited by solarrust

Loading

kazakov-al commented Nov 16, 2024 •

edited

Loading

kazakov-al commented Feb 3, 2025 •

edited

Loading

Inventoris left a comment •

edited

Loading

kazakov-al Feb 20, 2025 •

edited

Loading

kazakov-al Feb 20, 2025 •

edited

Loading